<template>
	<u-popup class="pay-pop-box" v-model="show" :custom-style="customStyle" :safe-area-inset-bottom="false"
		:mask-custom-style="{background: 'rgba(0, 0, 0, 0)'}" mode="bottom" border-radius="32" height="760rpx">
		<view class="content">
			<view class="content-top">
				<text></text>
				<text class="title">充值</text>
				<!-- <text class="cancel" @click="show=false">取消</text> -->
				<text></text>
			</view>
			<view class="content-input">
				<view class="container">
					<view class="input-top">
						<view class="input-left">
							<!-- <input type="number" class="input-control" v-model="inputVal" /> -->
							<text class="amount-text" v-if="valArr.length!=0">{{inputVal}}</text>
							<text class="tip-text" v-else>输入想要充值的金额~</text>
						</view>
						<view class="input-right" v-if="valArr.length!=0">| {{diamondNum}}钻</view>
					</view>
					<view class="keybord">
						<view class="left-keys">
							<view class="key-top">
								<view class="key-item" v-for="(item,index) in numberKeys" :key="item.id"
									:class="{ selected: item.selected }" @click='handleKeyClick(item,index)'>
									{{item.content}}
								</view>
							</view>
							<view class="key-bottom" @click='handleKeyClick(zearoData,-1)'
								:class="{ selected: zearoData.selected }">0</view>
						</view>
						<view class="right-keys">
							<view class="delete-key" @click="handleDeleteClick" :class="{selected:isDelete}">
								<!-- /static/img/delete-num.svg -->
								<u-image src='/static/img/deleteNum.svg ' mode="aspectFill" height="28rpx"
									:show-loading="false" width="40rpx"></u-image>
							</view>
							<view class="pay-key" @click="handlePayClick" :class="{ selected: isPay}">
								充值
							</view>

						</view>
					</view>
				</view>

			</view>



		</view>
		<!-- 	<view class="bottom-actions">
			<text class="agreement-box">充值代表已阅读并同意 <text class="agreement"
					@click="goto('/pages/pay/protocol/index')">《用户充值协议》</text>
			</text>
		</view> -->
		<view class="agreement-box">充值代表已阅读并同意 <text class="agreement"
				@click="goto('/pages/pay/protocol/index')">《用户充值协议》</text>
		</view>
	</u-popup>
</template>

<script>
	export default {
		components: {

		},
		props: {},
		data() {
			return {
				// 充值按钮是否点击
				isPay: false,
				// 删除按钮是否点击
				isDelete: false,
				numberKeys: [{
						id: 1,
						content: 1,
						selected: false
					},
					{
						id: 2,
						content: 2,
						selected: false
					},
					{
						id: 3,
						content: 3,
						selected: false
					},
					{
						id: 4,
						content: 4,
						selected: false
					},
					{
						id: 5,
						content: 5,
						selected: false
					},
					{
						id: 6,
						content: 6,
						selected: false
					},
					{
						id: 7,
						content: 7,
						selected: false
					},
					{
						id: 8,
						content: 8,
						selected: false
					},
					{
						id: 9,
						content: 9,
						selected: false
					},
					// {
					// 	id: 0,
					// 	content: 0
					// },
				],
				zearoData: {
					id: 0,
					content: 0,
					selected: false

				},
				inputVal: "",
				valArr: [],
				diamondNum: 0,
				show: false,
				userInfo: {
					wallet: 799,
				},
				curItem: {
					price: 1
				},
				customStyle: {
					// 'background': '#6236FF',
				},
				// 礼物列表数据示例
				gifts: [{
						custom: false,
						name: '10',
						price: '1',
						selected: true,
						id: 1,
					},
					{
						custom: false,
						name: '50',
						price: '5',
						selected: false,
						id: 2,
					},
					{
						custom: false,
						name: '100',
						price: '10',
						selected: false,
						id: 3,
					},
					{
						custom: false,
						name: '300',
						price: '30',
						selected: false,
						id: 4,
					},
					{
						custom: false,
						name: '1000',
						price: '100',
						selected: false,
						id: 13,
					},
					{
						custom: true,
						name: '自定义金额',
						price: '最低可充 1',
						selected: false,
						id: 6,
					}
				]
			}
		},
		onLoad(option) {

		},
		onReady() {

		},
		methods: {
			// 充值按钮点击
			handlePayClick() {
				this.isPay = true
				setTimeout(() => {
					this.isPay = false
				}, 200)
			},
			// 删除按钮点击
			handleDeleteClick() {
				this.isDelete = true
				setTimeout(() => {
					this.isDelete = false
				}, 200)
				this.valArr.pop()
				this.inputVal = this.valArr.join("")
				this.diamondNum = Number(this.inputVal) * 10
			},
			handleKeyClick(data, index) {
				// 触发一下动画
				if (data.content !== 0) {
					this.numberKeys.forEach((item, index) => {
						if (item.id == data.id) {
							item.selected = true
							setTimeout(() => {
								item.selected = false
							}, 200)
						}
					})
				} else {
					this.zearoData.selected = true
					setTimeout(() => {
						this.zearoData.selected = false
					}, 200)
				}


				let maxArr = [7, 4, 9, 9]
				if (this.valArr.length == 0 && data.content === 0) {
					return
				} else {
					this.valArr.push(data.content)
				}
				let str = this.valArr.join("")
				let calcNum = Number(str)
				if (calcNum > 7499) {
					this.valArr = [...maxArr]
					// uni.showToast({
					// 	title: '最高充值金额7499元',
					// 	duration: 1000,
					// 	icon: 'none'
					// });

				}

				this.inputVal = this.valArr.join("")

				this.diamondNum = Number(this.inputVal) * 10

			},

			goto(url) {
				uni.navigateTo({
					url
				});
			},
			pay(price) {
				console.log(price, '调起支付')
			},
			open() {
				this.show = true
			},
			setItemPay(item) {
				this.curItem = item
			},
			// 处理礼物选中状态的方法
			selectPay(item) {
				if (item.custom) {
					this.payType(item)
				} else {
					this.gifts.map((gift, i) => {
						if (item.id === gift.id) {
							if (!gift.selected) {
								// 切换选中状态
								gift.selected = true
								this.setItemPay(gift)
							} else {
								//已选中 则直接触发支付
								this.payType(gift)
							}
						} else {
							gift.selected = false

						}; // 重置其他礼物为未选中状态

					});
				}

			},
			/**
			 * @desc 判断充值类型 固定充值/自定义金额充值
			 */
			payType(gift) {
				if (gift.custom) {
					// 打开自定义充值

				} else {
					// 调起支付
					this.pay(gift.price)
				}
			},
		},
	}
</script>

<style lang='scss' scoped>
	@import url('./index.scss');

	.content-input {
		width: 100%;
		height: 84rpx;
		padding: 0 34rpx;

		.test {}

		.container {
			.test {}

			.input-top {
				background-color: #fff;
				height: 84rpx;
				border-radius: 12rpx;
				display: flex;
				justify-content: flex-start;
				padding: 22rpx;
				margin-bottom: 48rpx;

				.test {}

				.input-left {
					flex: 1;
					padding-right: 15rpx;
					display: flex;
					align-items: center;

					.test {}

					.amount-text {
						font-size: 32rpx;
						color: #181818;
						font-weight: 700;
					}

					.tip-text {
						font-size: 30rpx;
						color: #CDCDCD;
					}

					/* 		.input-control {
						font-weight: 700;
						font-size: 32rpx;
						color: #181818;
						width: 100%;
					} */
				}

				.input-right {
					min-width: 100rpx;
					display: flex;
					align-items: center;
					color: #c4c4c4;

				}
			}


			.keybord {
				width: 100%;
				height: 300rpx;
				display: flex;
				justify-content: space-between;

				.test {}

				.left-keys {
					height: 100%;
					width: 522rpx;

					.key-top {
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;

						.key-item {
							width: 160rpx;
							height: 92rpx;
							background: #FFFFFF;
							border-radius: 16rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							font-weight: 500;
							font-size: 40rpx;
							color: #333333;
							margin-bottom: 14rpx;
						}
					}

					.key-bottom {
						width: 100%;
						height: 92rpx;
						background: #FFFFFF;
						border-radius: 16rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-weight: 500;
						font-size: 40rpx;
						color: #333333;
						margin-bottom: 14rpx;
					}
				}

				.right-keys {
					width: 160rpx;
					height: 100%;
					margin-left: 14rpx;

					.test {}

					.delete-key {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 160rpx;
						height: 92rpx;
						background: #FFFFFF;
						border-radius: 16rpx;

						font-weight: 500;
						margin-bottom: 14rpx;

					}

					.pay-key {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 160rpx;
						height: 304rpx;
						/* background: #6236FF; */
						background-image: linear-gradient(135.00deg, rgb(232, 108, 255) 0%, rgb(58, 72, 255) 100%);

						border-radius: 16rpx;
						font-weight: 500;
						font-size: 32rpx;
						color: #FFFFFF;



					}
				}
			}
		}
	}

	.bottom-actions {
		position: absolute;
		left: 47%;
		transform: translateX(-50%);
		bottom: 48rpx;
	}

	.agreement-box {
		position: absolute;
		left: 0;
		bottom: 48rpx;
		width: 100vw;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #838383;
		/* background-color: pink; */
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>